import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import styles from "./orderDetail.module.less";
import { imgPath } from "@/common/utils";
import { $userOrderDetail } from "@/api/userCenter/userCenter";
import FailCausePopup from "./failCausePopup/failCausePopup";
export default defineComponent({
  name:'userCenterAccidentListOrderDetail',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      order_no: '',
      create_date: '',
      status: '',
      create_fail_msg: '',
    })

    //标题
    const ArticleHeader = (props: any) => (
      <div class={styles['article-header']}>
        <span>{props.title}</span>
      </div>
    )

    const insureInfos = reactive({
      name: '',
      plan_name: '',
      company: '',
      sum_premium: 0,
      pay_type_name: '',
      start_date: '',
      end_date: '',
      proposal_no: '',
      create_time: '',
      policy_no: '',
      insureProgram: [],
    })
    //保单基本信息
    const InsureInfo = () => (
      <div class={styles['insure-info']}>
        <ArticleHeader title={'保单基本信息'} />
        <div class={styles['insure-info-list']}>
          <div class={styles['list-col']}>
            <span class={styles['insure-label']}>保险产品：</span>
            <span class={styles['insure-value']}>{insureInfos.name}{insureInfos.plan_name}</span>
          </div>
          {
            insureInfos.company && <div class={styles['list-col']}>
              <span class={styles['insure-label']}>出单公司：</span>
              <span class={styles['insure-value']}>{insureInfos.company}</span>
            </div>
          }
          <div class={styles['list-col']}>
            <span class={styles['insure-label']}>保险期间：</span>
            <span class={styles['insure-value']}>{insureInfos.start_date}<span v-show={insureInfos.start_date} style={{ margin: '0 5px' }}>至</span>{insureInfos.end_date}</span>
          </div>
          {
            insureInfos.proposal_no && <div class={styles['list-col']}>
              <span class={styles['insure-label']}>投保单号：</span>
              <span class={styles['insure-value']}>{insureInfos.proposal_no}</span>
            </div>
          }
          {
            insureInfos.create_time && <div class={styles['list-col']}>
              <span class={styles['insure-label']}>出单时间：</span>
              <span class={styles['insure-value']}>{insureInfos.create_time}</span>
            </div>
          }
          {
            insureInfos.policy_no && <div class={styles['list-col']}>
              <span class={styles['insure-label']}>保单号：</span>
              <span class={styles['insure-value']}>{insureInfos.policy_no}</span>
            </div>
          }
          <div class={styles['list-col']}>
            <span class={styles['insure-label']}>保险保费：</span>
            <span class={[styles['insure-value'], styles.active]}>{insureInfos.sum_premium || 0}元</span>
          </div>
          <div class={styles['list-col']}>
            <span class={styles['insure-label']}>支付方式：</span>
            <span class={styles['insure-value']}>{insureInfos.pay_type_name}</span>
          </div>
        </div>
      </div>
    )
    const insureUsers = reactive({
      name_type: '',
      applicant_name: '',
      mobile: '',
      id_no: '',
      id_type: '',
      people: [
        {
          name: '雷律',
          sex: 1,
          id_type: 111,
          birthday: '1999-06-25',
          id_no: '362204199906254316'
        }
      ]
    })
    //投保人信息
    const InsureUser = () => (
      <div class={styles['insure-user']}>
        <ArticleHeader title={'投保人信息'} />
        <div class={styles['insure-user-list']}>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>{insureUsers.id_type === '111' ? '投保人姓名：' : '企业名称：'}</span>
            <span>{insureUsers.applicant_name}</span>
          </div>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>{insureUsers.id_type === '111' ? '投保人手机号：' : '企业手机号：'}</span>
            <span>{insureUsers.mobile}</span>
          </div>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>{insureUsers.id_type === '111' ? '投保人证件类型：' : '企业证件类型：'}</span>
            <span>{insureUsers.id_type === '111' ? '身份证' : '统一社会信用代码'}</span>
          </div>
          <div class={styles['insure-user-item']}>
            <span class={styles['insure-user-label']}>{insureUsers.id_type === '111' ? '投保人证件号：' : '统一社会信用代码：'}</span>
            <span>{insureUsers.id_no}</span>
          </div>
        </div>
      </div>
    )
    const People = () => (
      <div class={styles['insure-user']}>
        <ArticleHeader title={'被保人信息'} />
        <div class={styles['list-thed']}>
          <div class={styles.label}>姓名</div>
          <div class={styles.label}>姓别</div>
          <div class={styles.label}>证件类型</div>
          <div class={styles.label}>生日</div>
          <div class={styles.label}>证件号</div>
        </div>
        <div class={styles['people-list']}>
          {
            insureUsers.people.map((item: any) => (
              <div class={styles.item}>
                <div class={styles.value}>{item.name}</div>
                <div class={styles.value}>{item.sex === 1 ? '男' : ' 女'}</div>
                <div class={styles.value}>{item.id_type === '111' ? '身份证' : '其他'}</div>
                <div class={styles.value}>{item.birthday}</div>
                <div class={styles.value}>{item.id_no}</div>
              </div>
            ))
          }
        </div>
      </div>
    )
    //保障责任
    const InsureProgram = () => (
      <div class={styles['insure-program-area']}>
        <ArticleHeader title={'保障责任'} />
        <div class={styles['plan-table']}>
          <div class={styles['table-header']}>
            <div class={styles['table-header-col']}>
              <div class={styles['cell']}>保障内容</div>
            </div>
            <div class={styles['table-header-col']}>
              <div class={styles['cell']}>{insureInfos.plan_name}</div>
            </div>
          </div>
          <div class={styles['table-rows']}>
            {
              insureInfos.insureProgram.map((item: any) => (
                <div class={styles['table-row']}>
                  <div class={styles['table-col']}>
                    <div class={styles['cell']}>{item.name}</div>
                  </div>
                  <div class={styles['table-col']}>
                    <div class={styles['cell']}>
                      <div class={styles['content-item']}>{item.protect_field}</div>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )

    const insureInvoices = reactive({
      invoice_header: '',
      invoice_type: '',
      taxpayer_identification_number: '',
      realname: '',
      mobile: '',
      invoice_value: '',
      address: '',
    })

    //发票信息
    const InsureInvoice = () => (
      <div class={styles['insure-invoice']}>
        <ArticleHeader title={'发票信息'} />
        <div class={styles['insure-invoice-list']}>
          <div class={styles['insure-invoice-item']}>
            <span>发票抬头：</span>
            <span>{insureInvoices.invoice_header}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>发票类型：</span>
            <span>{insureInvoices.invoice_type}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>纳税人识别号：</span>
            <span>{insureInvoices.taxpayer_identification_number}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>联系人：</span>
            <span>{insureInvoices.realname}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>联系人手机号：</span>
            <span>{insureInvoices.mobile}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>发票金额：</span>
            <span>{insureInvoices.invoice_value}</span>
          </div>
          <div class={styles['insure-invoice-item']}>
            <span>寄送地址：</span>
            <span>{insureInvoices.address}</span>
          </div>
        </div>
      </div>
    )
    const FailCausePopupRef = ref(null as any);

    onMounted(() => {
      $userOrderDetail({ order_no: route.query.order_no }).then((res: any) => {
        let info = res.data?.order_info;
        state.order_no = info.order_no || '';
        state.create_date = info.create_time || '';
        state.status = info.picc_order_status.label || '';
        insureInfos.name = info.name || '';
        insureInfos.plan_name = info.plan_name || '';
        insureInfos.start_date = info.start_date || '';
        insureInfos.end_date = info.end_date || '';
        if (info.create_fail_msg) {
          state.create_fail_msg = info.create_fail_msg || '';
        }
        if (info.picc_order) {
          insureInfos.proposal_no = info.picc_order.proposal_no || '';
          insureInfos.create_time = info.picc_order.create_time || '';
          insureInfos.policy_no = info.picc_order.policy_no || '';
        }
        insureInfos.sum_premium = info.sum_premium || '';
        insureInfos.pay_type_name = info.pay_type_name || '';
        insureUsers.applicant_name = info.applicant.name || '';
        insureUsers.id_no = info.applicant.id_no || '';
        insureUsers.id_type = info.applicant.id_type || '';
        insureUsers.mobile = info.applicant.mobile || '';
        insureUsers.people = info.people || [];
        insureInfos.insureProgram = info.plan?.protection || [];
      })
    })

    return () => (
      <div class={styles.orderDetail}>
        <div class={styles['header-box']}>
          <div class={styles['title-box']}>
            <span>订单详情</span>
            <span class={styles['go-back']} onClick={() => { router.go(-1) }}>返回</span>
          </div>
          <div class={styles['btn-box']}>
            {
              state.status === '已出单' &&
              <div class={styles.btn} onClick={() => { router.push('/userCenter/applyInvoice') }}>申请电子发票</div>
            }
            {/* <div class={styles.btn}>下载电子发票</div>
            <div class={styles.btn}>查看投保单</div>
            <div class={styles.btn} onClick={() => { }}>下载投保单</div> */}
          </div>
        </div>
        <div class={styles.container}>
          <div class={styles['container-header']}>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>订单号：</span>
              <span>{state.order_no}</span>
            </div>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>提交时间：</span>
              <span>{state.create_date}</span>
            </div>
            <div class={styles['container-header-item']}>
              <span class={styles.label}>订单状态：</span>
              <span class={styles.status}>{state.status}</span>
            </div>
            {
              state.create_fail_msg === '' || <div class={styles['container-header-item']}>
                <span class={styles.fail} onClick={() => { FailCausePopupRef.value.open(state.create_fail_msg) }}>查看失败原因</span>
              </div>
            }

          </div>
          <InsureInfo />
          <InsureUser />
          <People />
          <InsureProgram />
          {/* <InsureInvoice /> */}
        </div>
        <FailCausePopup ref={FailCausePopupRef} />
      </div>
    )
  }
})